<script setup lang="ts">
import {reactive, ref, watch, defineProps} from "vue";
import type {InputMaterialType} from "@/data-type/material.type";
const defaultProps = {
  type: 'input',
  props: {
    label: '单行文本',
    text: '单行输入框',
    size: 'default',  // 控件大小
    placeholder: '请输入内容',
    type: 'default'
  }
}
const inputComponentSize = [
  {
    value: 'large',
    label: 'large',
  },
  {
    value: 'default',
    label: 'default',
  },
  {
    value: 'small',
    label: 'small',
  }
];
const props = defineProps<{material:InputMaterialType}>();
const activeKey = ref('1');
let formState = reactive<InputMaterialType>(props.material);
formState.props = Object.assign(defaultProps.props, formState.props?formState.props:{});
watch(props, (newValue, oldValue)=>{
  formState = newValue.material;
});
</script>

<template>
  <a-tabs v-model:activeKey="activeKey" style="background:#fff;padding: 4px 8px;">
    <a-tab-pane key="1" tab="属性">
      <a-form
          :model="formState"
      >
        <a-form-item
            label="中文名称"
            name="label"
        >
          <a-input
              v-model:value="formState.props.label" allow-clear/>
        </a-form-item>
        <a-form-item
            label="文本内容"
            name="text"
        >
          <a-input
              v-model:value="formState.props.text" :placeholder="formState.props.placeholder" allow-clear/>
        </a-form-item>
        <a-form-item
            label="提示信息"
            name="placeholder"
        >
          <a-input v-model:value="formState.props.placeholder" placeholder="输入框内的提示语" allow-clear/>
        </a-form-item>
        <a-form-item
            label="控件大小"
            name="size"
        >
          <a-select v-model:value="formState.props.size">
            <a-select-option v-for="item in inputComponentSize" :value="item.value">{{ item.label }}</a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
    </a-tab-pane>
    <a-tab-pane key="2" tab="样式" force-render>样式</a-tab-pane>
    <a-tab-pane key="3" tab="事件">事件</a-tab-pane>
  </a-tabs>
</template>

<style scoped>

</style>
